<!--  -->
<template>
  <div class="app-container">
    <el-form :inline="true" size="small">
      <el-form-item label="模板编号">
        <el-input
          v-model="modelId"
          placeholder="请输入字符编号"
          size="small"
        ></el-input>
      </el-form-item>
      <el-form-item label="模板名称">
        <el-input
          v-model="modelName"
          placeholder="请输入字符编号"
          size="small"
        ></el-input>
      </el-form-item>

      <el-button icon="el-icon-search" type="primary" size="small" @click
        >搜索</el-button
      >
      <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
      <el-button icon="el-icon-edit" type="warning" size="small" @click
        >新增</el-button
      >

      <el-button icon="el-icon-delete" type="danger" size="small" @click
        >删除</el-button
      >

      <el-button
        icon="el-icon-search"
        type="primary"
        size="small"
        @click="toExMode"
        >习题分类管理</el-button
      >
      <el-button icon="el-icon-search" type="primary" size="small" @click
        >导入</el-button
      >
    </el-form>

    <div style="margin-top: 20px">
      <el-table :data="cate_list" border stripe>
        <el-table-column type="selection" align="center" width="60" />
        <template v-for="(col, index) in columns">
          <el-table-column
            :prop="col.data"
            :key="col.id"
            :label="col.label"
            align="center"
            :width="col.width"
          ></el-table-column>
        </template>
        <el-table-column label="操作" align="center" width="170">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="edit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              style="color: #f56c6c"
              @click="deleteCate(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="pageData.page"
        :page-sizes="[20, 40, 80, 100]"
        :page-size="pageData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      />
    </div>

    <!-- 添加分栏 -->
    <el-dialog
      title="添加分栏"
      :visible.sync="showEdit"
      width="35%"
      @close="showEdit = false"
    >
      <el-form
        :model="cData"
        ref="form"
        :rules="rules"
        label-width="120px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="习题编号">
          <el-input
            v-model="cData.name"
            style="width: 270px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="习题题目">
          <el-input
            v-model="cData.brief"
            style="width: 270px"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="习题选项">
          <div
            v-for="(item, index) in answer"
            :key="index"
            style="margin-bottom: 20px"
          >
            {{ letter[index] }}
            <el-input
              v-model="item.content"
              style="width: 210px; margin-left: 20px"
              clearable
            ></el-input>
            <el-button
              type="text"
              style="color: #f66; margin-left: 15px"
              v-if="index >= 2"
              @click="delAns(index)"
              >删除</el-button
            >
          </div>
          <div style="margin-left: 240px">
            <el-button type="text" @click="addAnswer">添加</el-button>
          </div>
        </el-form-item>
        <el-form-item label="习题答案">
          <el-select v-model="cData.answer" clearable filterable @change="">
            <el-option
              v-for="(item, index) in answer"
              :key="index"
              :label="item.content"
              :value="item.content"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="cData.type" clearable filterable @change="">
            <el-option label="1" value="1t"> </el-option>
            <el-option label="2" value="12t"> </el-option>
            <el-option label="3" value="123t"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="showEdit = false">取消</el-button>
        <el-button type="primary" @click>提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  createCategory,
  categoryDetail,
  updateCategory,
  deleteCategory,
  categoryList,
} from "@/api/article";
export default {
  data() {
    return {
      activeName: "first",
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"],
      modelId: "",
      modelName: "",
      msgApi: "",
      cData: {},
      showEdit: false,
      showEdit: false,
      showEdit: false,
      rules: {},
      i: "", //cate_id
      pageData: {
        page: 1,
        limit: 10,
      },
      total: 10,
      cate_list: [
        {
          id: "1",
          name: "1",
          content: "1",
          type: "1",
        },
        {
          id: "1",
          name: "1",
          content: "1",
          type: "1",
        },
        {
          id: "1",
          name: "1",
          content: "1",
          type: "1",
        },
        {
          id: "1",
          name: "1",
          content: "1",
          type: "1",
        },
      ],
      answer: [
        { order: "A", content: "答案11" },
        { order: "B", content: "答案22" },
      ],
      columns: [
        { key: 0, label: `习题编号`, data: "id", width: 80 },
        { key: 1, label: `习题题目`, data: "name", width: 240 },
        { key: 2, label: `错误率`, data: "content" },
        { key: 3, label: `所属分类`, data: "type" },
      ],
    };
  },
  created() {
    // this.getCategoryList();
  },
  methods: {
    getCategoryList() {
      categoryList().then((r) => {
        if (r.code == "200") {
          this.cate_list = r.data.rows;
          console.log(this.cate_list);
        } else {
          // this.$message.error(r.msg);
        }
      });
    },
    add() {},
    edit(i) {
      this.showEdit = true;
      this.updateData = this.cate_list[i];
    },
    addAnswer() {
      var n = this.answer.length;
      this.answer.push({ order: this.letter[n], content: "" });
    },
    delAns(i) {
      this.answer.splice(i, 1);
    },
    detail(i) {
      console.log(i);
      this.i = i;
      this.showEdit = true;
    },
    createCategory() {
      createCategory(this.cData).then((r) => {});
    },
    getCategoryDetail() {
      categoryDetail().then((r) => {
        console.log(r);
      });
    },
    updateCategory(i) {
      updateCategory(this.updateData).then((r) => {
        console.log(r);
      });
    },
    deleteCate(i) {
      deleteCategory(this.cate_list[i].id).then((r) => {
        console.log(r);
      });
    },
    beforeCoverUpload() {},

    sizeChange(a) {
      this.pageData.limit = a;
      this.getCategoryList();
    },
    currentChange(a) {
      this.pageData.page = a;
      this.getCategoryList();
    },
    toExMode() {
      this.$router.push("/university/exeMode");
    },
  },
};
</script>
<style>
.sok {
  color: #5cb87a;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #5cb87a;
  background: #fff;
  border-radius: 5px;
}
.sfail {
  color: #f56c6c;
  width: 60px;
  margin: 0 auto;
  border: 1px solid #f56c6c;
  background: #fff;
  border-radius: 5px;
}
.btnBox {
  height: 130px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
.btnBox .el-button {
  margin: 0;
}
.detailLog div {
  margin: 10px;
  color: #000;
  font-size: 16px;
}
.detailLog .dbox {
  display: flex;
  flex-wrap: wrap;
}
.detailLog .dbox > div {
  width: 46%;
  margin: 10px 0;
}
</style>
